<template>
  <div class="page">
    <div class="nav_container">
      <mynav></mynav>
    </div>
    <div class="banner">
      <img src="../../../static/images/kzt_mobile.jpg" class="mobile">
      <img src="../../../static/images/kzt_pc.jpg" class='pc'>
    </div>
    <div class="container context_container">
      <div class="row">
        <div class="col-12 col-md-3">
          <div class="nav flex-column nav-pills let-nav">
            <router-link :class="['nav-link', currontNav == 'recharge' ? 'active' : '']" :to="{path:'/frontmsg/recharge'}">用户充值</router-link>
            <router-link :class="['nav-link', currontNav == 'rechargerecored' ? 'active' : '']" :to="{path:'/frontmsg/rechargerecored'}">
              充值记录</router-link>
            <router-link :class="['nav-link', currontNav == 'changuser' ? 'active' : '']" :to="{path:'/frontmsg/changuser'}">基本信息</router-link>
            <router-link :class="['nav-link', currontNav == 'scorestore' ? 'active' : '']" :to="{path:'/frontmsg/scorestore'}">
              积分商城</router-link>
            <router-link :class="['nav-link', currontNav == 'scorerecored' ? 'active' : '']" :to="{path:'/frontmsg/scorerecored'}">
              积分记录</router-link>
          </div>
          <div class="qiandao">
            <ul>
              <li v-for="item in qiandao" :key="item.name">
                <dl>
                  <dt>
                    <div v-if="item.status ===1"><img src="/static/images/qiandao.jpg" @click="qiandaoClick(item.score)"></div>
                    <div v-else-if="item.status ===2"><img src="/static/images/success.jpeg" @click="message()"></div>
                    <span v-else>+{{item.score}}</span>
                  </dt>
                  <dd>{{item.name}}</dd>
                </dl>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-12 col-md-9">
          <div class="tab-content right-content">
            <div class="tab-pane fade show active">
              <router-view />
            </div>
          </div>
        </div>
      </div>
    </div>
    <myfooter></myfooter>
  </div>
</template>
<script>
  import mynav from "@/components/nav";
  import myfooter from "@/components/footer";
  import banner from "@/components/banner";
  import {
    checkRules,
    checkData,
    checked_click
  } from "@/api/service";
  export default {
    components: {
      mynav,
      myfooter,
      banner,
    },
    data() {
      return {
        currontNav: "",
        qiandao: [{
              time: '',
              day: 'd1',
              status: 0,
              name: '1天',
              score: '5',
            }, {
              time: '',
              day: 'd2',
              status: 0,
              name: '2天',
              score: '5',
            }, {
              time: '',
              day: 'd3',
              status: 0,
              score: '5',
              name: '3天'
            }, {
              time: '',
              day: 'd4',
              status: 0,
              score: '5',
              name: '4天'
            }, {
              time: '',
              day: 'd5',
              status: 0,
              score: '5',
              name: '5天'
            }, {
              time: '',
              day: 'd6',
              status: 0,
              score: '5',
              name: '6天'
            }, {
              time: '',
              day: 'd7',
              status: 0,
              score: '5',
              name: '7天'
            }]
      };
    },
    watch: {
      $route: {
        handler: function(val, oldVal) {
          this.currontNav = val.name
        },
        // 深度观察监听
        deep: true,
      },
    },
    mounted() {
      this.currontNav = this.$route.name;
    },
    created() {
      this.search();
      this.searchCheckData();
    },
    methods: {
      search() {
        checkRules().then(res => {
          if (res.status == 200) {
            for (let key in res.data) {
              this.qiandao.forEach(item => {
                if (key == item.day) {
                  item.score = res.data[key];
                }
              })
            }
          }
        })
      },
      searchCheckData() {
        checkData().then(res => {
          if (res.status == 200) {
            if (res.data.length != 0) {
              var lastDay = 8,
                newData = res.data.reverse();
              this.qiandao.forEach((item, index) => {
                if (index < (newData.length - 1)) {
                  item.status = 2;
                } else if (index == (newData.length - 1)) {
                  if (new Date(newData[newData.length - 1].createTime).getDate() == new Date().getDate()) {
                    item.status = 2;
                  } else {
                    item.status = 2;
                    lastDay = index + 1;
                  }
                } else {
                  if (index == lastDay) item.status = 1;
                }
              })
            } else {
              this.qiandao.forEach((item, index) => {
                if (index == 0) item.status = 1;
                else item.status = 0;
              })
            }
          }
        })
      },
      qiandaoClick(args) {
        checked_click().then(res => {
          if (res.status == 200) {
            this.searchCheckData();
            this.$message({
              type: "success",
              message: "签到成功,恭喜获得${args}积分",
            });
            location.reload();
          }
        })
      },
      message() {
        this.$message({
          type: "success",
          message: "您已签到,请明天再来",
        });
      }

    },
  };
</script>
<style lang="less" scoped>
  .page {
    .nav_container {
      background: #382fba;
      width: 100%;
      height: 74px;
    }

    .context_container {
      margin: 15px auto;
      font-size: 14px;

      .let-nav {
        border: 1px solid #f5f5f5;
        box-shadow: 1px 1px 10px 10px #f6f6f6;
        cursor: pointer;

        >a {
          width: 100%;
          margin: 5px auto;
        }
      }
    }

    .qiandao {
      ul {
        margin: 15px 0px;
        padding: 0px;

        li {
          padding: 0px;
          margin: 0px;
          list-style-type: none;
          display: inline-block;
          margin: 0px 5px;
          color: grey;
          font-size: 12px;

          dl {
            dt {
              img {
                width: 18px;
                height: 18px;
              }

              cursor: pointer;

              span {
                background: #f3f3f3;
                width: 23px;
                height: 23px;
                line-height: 23px;
                padding: 1px;
                display: inline-block;
              }

              dd {
                margin: 5px auto
              }
            }
          }
        }
      }
    }
  }
</style>
